<template>
  <div class="swiper">
    <!-- Swiper -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="static/img/bg/1.jpg" width="100%" />
          <p class="swiper-text">昨夜西风凋碧树，独上高楼，望尽天涯路。</p>
        </div>
        <div class="swiper-slide">
          <img src="static/img/bg/2.jpg" width="100%" />
          <p class="swiper-text">衣带渐宽终不悔，为伊消得人憔悴。</p>
        </div>
        <div class="swiper-slide">
          <img src="static/img/bg/3.jpg" width="100%" />
          <p class="swiper-text">众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import "static/css/swiper.min.css";
import Swiper from "swiper";
export default {
  mounted() {
    /* eslint-disable no-new */
    new Swiper(".swiper-container", {
      autoplay: true,
      speed: 1000,
      longSwipesRatio: 0.1,
      effect: "fade",
      loop: true
    });
  }
};
</script>
<style scoped rel="stylesheet/stylus" lang="stylus">
.swiper-slide {
  position: relative;
  max-height: 500px;

  .swiper-text {
    color: #ccc;
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    text-align: center;
    margin: 0;
    width: 90%;
    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
  }
}

@media (max-width: 767px) {
  .swiper-slide .swiper-text {
    font-size: 16px;
    padding-top: 20px;
    text-shadow: -0.5px -0.5px 0.5px #fff, 0.5px 0.5px 0.5px #000;
  }

  .swiper-slide img {
    min-height: 120px;
  }
}
</style>
